<template>
  <div>
    <div class="container">
      <div class="main">
        <h1>忘记密码</h1>
        <div class="forget">
          <div class="a">
            <div class="item">
              <i class="fa fa-user"></i>
              <input type="text" placeholder="请输入用户名或邮箱" v-model="userForm.username"/>
            </div>
            <div class="item">
              <i class="fa fa-unlock-alt"></i>
              <input type="text" placeholder="请输入新密码" v-model="userForm.password"/>
            </div>

            <div class="item re">
              <input type="text" placeholder="请确认你的密码" v-model="repassword"/>
            </div>
            <div class="item submit">
              <el-button type="primary" class="btn" @click="regist">确定</el-button>
            </div>
            <div class="item back">
              <a href="login.html">返回登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
module.exports = {
  data(){
    return {
      userForm:{
        password:'',
        username:'',
        nickName:this.username
      },
      repassword:''
    }
  },
  methods:{
    regist(){
      if(this.userForm.password===this.repassword){
        axios.post('/user/regeist',this.userForm).then((res)=>{
          // console.log(this.userForm)
          // console.log(res)
          if(res.data.code===100){
            alert("注册成功！")
            location.href='login.html'
          }
        })
      }else {
        alert("两次密码不一致")
      }

    }

  }
};
</script>

<style scoped>
.back{
  margin-left: 50%;
}
.main {
  /* border: 1px solid black; */
  width: 800px;
  height: 700px;
  margin: 0 auto;
}

.forget {
  /* border: 1px solid pink; */
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 400px;
}

.fa {
  font-size: 30px;
}

input {
  width: 350px;
  height: 35px;
}

.a {
  position: absolute;
  /* border: 1px solid black; */
  left: 25%;
  top: 10%;
}

.re {
  margin-top: 4px;
  margin-left: 24px;
}

.main h1 {
  text-align: center;
}

.submit {
  margin: 10px 8%;
}
.item{
  padding: 5px;
}
.container{
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient( 200deg, #e3c5eb, #a9c1ed);
  left: 0%;
  top: 0%;
}

.btn{
  width: 106%;
}
</style>
